<template>
  <div class="header">
    <van-nav-bar title="约课记录" />
    <ul class="ul">
      <li>待上课</li>
      <li>已上课</li>
      <li>已取消</li>
    </ul>
    <div>
      <img src="http://xl.9yuecloud.com/assets/img/no-message.8d3ca5af.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  // 组件状态值
  data() {
    return {};
  },
  // 生命周期
  mounted() {},
  // 组件方法
  methods: {},
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 过滤器
  filters: {},
  // 自定义指令
  directives: {},
};
</script> 

<style scoped>
.ul {
  display: flex;
  width: 100%;
  height: 35px;
  flex-direction: row;
  justify-content: space-around;
  background: white;
}
li{
  line-height: 35px;
}
li:hover,.active{
  color: orange;
  border-bottom: 1px solid orange;
}
img{
  height: 225px;
}
.header{
  height: 1000px;
  background: #f2f3f5;
}
</style>

